<template>
  <div class="nav_list">
    <ul class="nav_list_ul">
      <li
        v-for="(item,index) in categories"
        :key="index"
        class="nav_list_ul_item"
      >
        <div class="nav_list_ul_item_title">
          <img src="~/assets/nav/pc3.png"><div class="nav_list_ul_item_title-content" @click="handleCategorySearch(item._id)">
            {{ item.title }}
          </div>
        </div>
        <div class="item-wrapper">
          <div
            v-for="(cate,a) in item.children"
            :key="a"
            class="nav_list_ul_item_content"
            @click="handleCategorySearch(cate._id)"
          >
            {{ cate.title }}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'CategoryNav',
  computed: {
    ...mapState(['counter', 'categories'])
  },
  methods: {
    handleCategorySearch (id) {
      this.$store.commit('setSearchCategory', id)
      this.$router.push('/search')
    }
  }
}
</script>

<style lang="scss" scoped>
.nav_list{
  width: 240px;
  background: #fff;
  position: relative;
  .nav_list_ul{
    padding-left: 0px !important;
    display: flex;
    flex-direction: column;

    .nav_list_ul_item{
      width: 230px;
      border-top: 1px dotted #ccc;
      margin: 5px 5px;
      display: block;
      max-height: 126px;
      min-height: 112px;
      overflow: hidden;
      box-sizing: border-box;

      .nav_list_ul_item_title{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        line-height: 14px;
        //padding-bottom: 3px;
        padding-left: 6px;
        //margin-top: 20px;
        //padding-top: 6px;

        img{
          display: block;
          width: 15px;
        }

        .nav_list_ul_item_title-content{
          display: block;
          font-size: 16px;
          margin-left: 4px;
          color: #f1a209;
          line-height: 40px;
          font-weight: 900;
          cursor: pointer;
        }
      }

      .item-wrapper{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .nav_list_ul_item_content{
          font-size: 14px;
          cursor: pointer;
          display: inline-block;
          line-height: 22px;
          color: #333;
          margin: auto 6px;
        }
      }

    }

    &:first-child li{
      margin-top: 0;
    }
  }
}
</style>
